<template>
  <div>
    <van-skeleton title :row="9" v-if="!goodsList.length" />
    <ul class="dishesList">
      <li v-for="item in goodsList" :key="item.id">
        <van-image
          width="76"
          height="76"
          radius="12"
          fit="cover"
          :src="item.picFile.url"
        />
        <div class="info">
          <div class="name">{{ item.name }}</div>
          <div class="price">{{ item.price }}</div>
          <div class="tag" v-if="item.tagsList && item.tagsList.length > 0">
            <van-space>
              <van-tag
                color="#f4f4f4"
                text-color="#616362"
                v-for="item in item.tagsList"
                type="primary">
                {{ item }}
              </van-tag>
            </van-space>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script setup>
import { goodsListMethod } from "@/api/homePage.js";
const props = defineProps({
  merchantId: String,
});

//获取商家商品列表
onMounted(() => { getGoodsList() });
const goodsList = ref([]);
const getGoodsList = async () => {
  const res = await goodsListMethod({ merchantId: props.merchantId, pageNum: 1, pageSize: 200 });
  const { rows } = res;
  goodsList.value = rows.map(item => {
    return {
      ...item,
      tagsList: item.tags ?item.tags.split(',') : [],
    }
  });
}

</script>
<style lang="less" scoped>
ul.dishesList {
  li {
    height: 100px;
    border-radius: 20px;
    background: #fff;
    padding: 12px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: start;
    &:not(:last-child) {
      margin-bottom: 12px;
    }
    >div.info {
      margin-left: 12px;
      width: calc(100% - 76px - 12px);
      .name {
        font-size: 14px;
        font-weight: bold;
        color: #000000;
      }
      .tag {

      }
      .price {
        font-size: 14px;
        font-weight: bold;
        color: #FB5D3B;
      }
    }
  }
}
</style>
